<?php
    $pdo = new PDO('mysql:dbname=onethink;host=127.0.0.1' , 'root' , '123456');
    $sql = 'SET NAMES `utf8`';
    $pdo->query($sql);
    $current = isset($_GET['page']) ? $_GET['page']+0 : 1;
    $limit = 20;
    $offset = ($current - 1) * $limit;
    $sql = "SELECT * FROM `onethink_menu` LIMIT  {$offset}, {$limit}";
    $res = $pdo->prepare($sql);
    $res->execute();
    $data = $res->fetchAll(PDO::FETCH_ASSOC);

    if (isset($_GET['is_ajax']) && $_GET['is_ajax'] == 1)
    {
        echo json_encode($data , JSON_UNESCAPED_UNICODE);
        die;
    }

?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="../b2c/amazeui/css/amazeui.css">
<script src="../b2c/amazeui/js/jquery.min.js"></script>
<body>
<div class="am-container">
<table id="table">
<?php foreach($data as $k => $v):?>
<tr>
    <td><?=$v['id']?></td>
    <td><?=$v['title']?></td>
    <td><?=$v['url']?></td>
</tr>
<?php endforeach;?>
</table>
<ul class="am-pagination">
    <?php for($i = 1; $i<=5; $i++):?>
    <li <?php echo $current == $i ? 'class="am-active"' : ''?>><a href="?page=<?=$i?>"><?=$i?></a></li>
    <?php endfor;?>
</ul>
</div>
</body>
<script src="https://cdn.bootcss.com/template_js/0.7.1-1/template.min.js"></script>
<script id="ajax-page" type="text/html">
    <%for(var i = 0; i<data.length; i++){%>
    <tr>
        <td><%=data[i].id%></td>
        <td><%=data[i].title%></td>
        <td><%=data[i].url%></td>
    </tr>
    <%}%>
</script>
<script>
    $('.am-pagination a').click(function (e) {
        e.preventDefault();
        var url = $(this).attr('href')
        $.ajax({
            url : url,
            data : 'is_ajax=1',
            dataType:'json',
            success : function (res)
            {
                var html = template($('#ajax-page').html() , {data:res})
                $('#table').html(html)
            }

        });



    })
</script>
</html>